<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<my-navbar leftText="查看物流" @leftClick="leftClick"></my-navbar>
		<!-- #endif -->
		<map longitude="115.847658" latitude="28.678002" :include-points="polyline[0].points" id="container"
			:markers="markers" :polyline="polyline"></map>
		<view v-if="time&&distance" class="bottom flex-center">
			司机距离我还有{{distance}}，预计需要{{time}}
		</view>
		<view v-else class="bottom flex-center">暂无数据</view>

	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				time: '',
				distance: '',
				markers: [],
				polyline: [{
					points: [],
					color: "#2979ff",
					width: 8
				}],

			};
		},
		onLoad(options) {
			this.getData(options.id);
		},
		methods: {
			getData(id) {
				$https('GET', 'getLogistics', {
					id
				}, res => {
					if (res.data.errcode == 0) {
						let data = res.data.data;
						this.changeT(data.paths[0].distance, data.paths[0].duration)
						// origin: "115.8646462,28.706147		起点
						// destination: "115.8232700,28.6457170"	终点
						let origin = data.origin.split(','),
							destination = data.destination.split(',');
						// 添加点
						this.markers = [{
								id: 1,
								latitude: origin[1],
								longitude: origin[0]
							},
							{
								id: 99,
								latitude: destination[1],
								longitude: destination[0]
							},
						];
						let path = [];
						let dataArray = data.paths[0].steps;
						dataArray.map(i => {
							let a = i.polyline.split(';');
							a.map(b => {
								let c = b.split(',')
								path.push({
									latitude: c[1],
									longitude: c[0]
								})
							})
						})
						this.polyline[0].points = path;
					}
				})
			},
			changeT(distance, time) {
				this.distance = `${(distance/1000).toFixed(1)}km`;
				this.time = `${parseInt(time/60)}分钟`;
			},

			leftClick() {
				uni.$emit('updateorder', () => {})
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	#container,
	uni-map {
		width: 100%;
		// #ifndef MP-WEIXIN
		height: calc(100vh - 180rpx);
		// #endif
		// #ifdef MP-WEIXIN
		height: calc(100vh - 100rpx);
		// #endif
		// #ifdef APP-PLUS
		height: calc(100vh - calc(180rpx + var(--status-bar-height)));
		// #endif

	}

	.bottom {
		height: 100rpx;
		background: #fff;
		font-size: 34rpx;
	}
</style>
